<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
			<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
				<view style="display: flex;align-items: center;font-size: 30rpx;">{{ detail.saleOrderCode || '' }}</view>
				<view style="color: #999999;font-size: 22rpx;">{{ detail.saleOrderDate || '' }}</view>
			</view>
			<view class="" slot="body">
				<u-row gutter="16">
					<u-col span="12">
						<view class="apply-text"><span>客户名称：</span>{{ detail.customerName || '' }}</view>
						<view class="apply-text"><span>地址：</span>{{ detail.address || '' }}</view>
						<view class="apply-text"><span>业主电话：</span>{{ detail.phone || '' }}</view>
						<view class="apply-text"><span>客户描述：</span>{{detail.remark || ''}}</view>
					</u-col>  
					
						<u-col span="12">
							<view class="apply-text"><span>客户图片：</span></view>
							<view v-for="(item,index) in detail.saleOrderAttaches" :key="index">
								<image  class="user-images" :src="item.attachPath.replace(/\\/g,'/')" @click="previewImage(item.attachPath)"></image>
								
							</view>
						</u-col>
				</u-row> 
				
				<view class="apply-text"><span>处理附件：</span></view>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic"
					@on-choose-complete="onChooseComplete" @on-remove="removeSuccess" name="1" multiple :maxCount="9" :auto-upload="false"
					:previewFullImage="true"></u-upload>
				<textarea style="border: 2rpx solid #eee;padding: 20rpx;border-radius: 8rpx;" v-model="detail.remarkA" placeholder="请输入处理备注" count></textarea>
			</view>
		</u-card>
		<u-row gutter="32" class="bottom-box" justify="center">
			<view style="width:90%;margin:0 auto"><u-button type="primary" shape="circle" @click="submit()">确定</u-button></view>
		</u-row>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			queryParam: {},
			list: [{}, {}],
			fileList: [],
			text: null,
			detail: {},
			saleOrderAttaches:[]
		}
	},
	onLoad(options) {
		this.detail = options
		this.getDetail()
	},
	methods: {
		getDetail(){
			
			
			this.$u.api.getBizAfterSaleOrder({orderId:this.detail.id}).then(res=>{
				if(res.code == 200){
					this.detail = res.data
				}else{
					this.$u.toast(res.msg)
				}
			})
		},
			/**
			 * 
			 * @param {string} url 
			 * 预览图片
			 */
			previewImage(url) {
				uni.previewImage({
				  current: url.replace(/\\/g,'/'),
				  urls: [url.replace(/\\/g,'/')],
				  indicator: true
				});
			  },
		submit() {
			let params = {
				...this.detail,
				status:'2',
				afterSaleOrderAttaches:this.saleOrderAttaches,
			}
			this.$u.api.updateBizAfterSaleOrder(params).then(res=>{
				if(res.code == 200){
					this.$u.toast('操作成功')
					setTimeout(()=>{
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2]; //上一个页面
						prevPage.$vm.queryParam.aftermarketStatus = 2
						prevPage.$vm.current = 1
						prevPage.$vm.change(1); 
						uni.navigateBack()
					},500);
				}else{
					this.$u.toast(res.msg)
				}
			})
			
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		removeSuccess(list,index){
			// 组件删除成功后，需要处理接收的数组
			this.saleOrderAttaches.splice(index,1)
		},
		// 删除图片
		deletePic(event) {

			console.log('this[`fileList${event.name}`] :>> ', this[`fileList${event.name}`]);
			throw new Error('123')
			// this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		
		onChooseComplete(lists, name) {
				console.log('lists :>> ', lists);
				const app = this;
				const config = this.vuex_config;
				const upload = (list,index)=>{
					uni.uploadFile({
					url: config.baseUrl + '/common/upload',
					filePath: list[index].url,
					name: 'file',
					header: {
						"Authorization":'Bearer ' + this.vuex_token
					},
					//	这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
					success: (res) => {
						let result = JSON.parse(res.data)
						if (result.code == 200) {
							this.$u.toast('上传成功');
							this.saleOrderAttaches.push({
								attachPath:result.url,
								attachType:2
							})
							// this.$refs.upload_file.lists[index].progress = 100
						} else {
							this.$u.toast(result.msg);
						}
					},
				})
				}
				lists.forEach((val,index)=>{
					if(val.progress == 0){
						upload(lists,index)
					}
				})
			},
	}

}
</script>

<style lang="scss" scoped>
@import 'index.scss';

page {
	background-color: #f5f5f5;
}

.wrap .search {
	background: #ffffff;
}

.apply-text {
	font-size: 28rpx;
	color: #333333;

	span {
		color: #999999;
	}
}

.user-images {
	width: 80px;
	height: 80px;
	margin-right: 8px;
}

.apply-list-foot {
	font-size: 28rpx;
}

.personnel-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.personnel-user {
		position: relative;
		margin: 5px 9px 0;
	}

	.user-images {
		width: 48px;
		height: 48px;
		margin-right: 0;

	}

	.iconfont {
		position: absolute;
		top: -12px;
		right: -5px;
		color: #FE0100;
	}
}</style>